<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
                <el-form-item label="校区名称" prop="schoolName">
                    <el-input v-model="form.schoolName" placeholder="请输入校区名称" />
                </el-form-item>
                <el-form-item label="校区logo" prop="logo">
                    <ImgUpload v-model="form.logo" />
                </el-form-item>
                <el-form-item label="类别" prop="category">
                    <el-radio-group v-model="form.category">
                        <el-radio label="主校区" disabled />
                        <el-radio label="分校区" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="开启状态" prop="isopen">
                    <el-radio-group v-model="form.isopen">
                        <el-radio label="开启" value="开启" />
                        <el-radio label="关闭" value="关闭" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        {{ props.num == 1 ? '提交' : '修改校区' }}
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import ImgUpload from '../../../components/img-upload.vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { SchoolPost, SchoolUpdate } from '../../../api/dapao-school';
import { SchoolType } from '../../../types/dapao-school';
import { cloneDeep } from 'lodash';
interface EmitType {
    (agr: 'update:modelValue', bool: boolean): void
}
const emit = defineEmits<EmitType>()
interface PropsType {
    num: number;
    SchoolInfo: SchoolType | undefined
}
const props = defineProps<PropsType>()
let form = reactive<SchoolType>({
    schoolName: '',
    logo: '',
    category: '',
    isopen: '',
})
if (props.SchoolInfo) {
    form = props.SchoolInfo
}

const rules = reactive<FormRules<{ schoolName: string, category: string, logo: string, isopen: string }>>({
    schoolName: [
        { required: true, message: '请输入校区名称', trigger: 'blur' },
    ],

    category: [
        {
            required: true,
            message: '请选择校区类别',
            trigger: 'change',
        },
    ],
    logo: [
        {
            required: true,
            message: '请上传校区logo',
            trigger: 'change',
        },
    ],
    isopen: [
        {
            required: true,
            message: '请选择开启状态',
            trigger: 'change',
        },
    ]


})

const ruleFormRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {

            if (!props.SchoolInfo) {
                // 新增数据
                SchoolPost(form).then(() => {
                    ElMessage.success("新增校区成功")
                    emit('update:modelValue', false)
                })
            } else {
                let obj = cloneDeep(form)
                delete obj.createdAt
                delete obj.updatedAt
                SchoolUpdate(props.SchoolInfo.objectId!, obj).then(() => {
                    ElMessage.success("修改校区成功")
                    emit('update:modelValue', false)
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped></style>